<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域管理</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <link href="./css/area_management.css" rel="stylesheet">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="robots" content="noindex,nofollow">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="wap-font-scale" content="no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <meta name="x5-orientation" content="portrait">
    <meta name="screen-orientation" content="portrait">
</head>

<body>
    <div class="area-page">
        <div class="layui-card">
            <div class="layui-card-header">区域管理</div>
            <div class="layui-card-body">
                <div class="area-toolbar">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <!-- 左侧搜索区域 -->
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">搜索</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchInput" placeholder="区域名称/备注"
                                                class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <!-- 右侧操作区域 -->
                            <div class="area-actions" style="text-align: right;">
                                <button type="button" class="layui-btn layui-btn-sm" id="btnSearch"><i
                                        class="layui-icon">&#xe615;</i> 搜索</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btnReset"><i
                                        class="layui-icon">&#xe669;</i> 重置</button>
                                <button class="layui-btn layui-btn-sm" id="btnAddArea"><i
                                        class="layui-icon">&#xe654;</i> 添加区域</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="areaTable" lay-filter="areaTable"></table>
            </div>
        </div>
    </div>

    <!-- 行内操作栏模板 -->
    <script type="text/html" id="tplRowActions">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
        </div>
    </script>

    <!-- 区域表单模板 -->
    <script type="text/html" id="tplAreaForm">
        <form class="layui-form" lay-filter="areaForm" style="padding: 16px 24px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">区域名称</label>
                <div class="layui-input-block">
                    <input type="text" name="areaName" required lay-verify="required" autocomplete="off" placeholder="请输入区域名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">区域编码</label>
                <div class="layui-input-block">
                    <input type="text" name="areaCode" placeholder="请输入区域编码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                </div>
            </div>
            <!-- 操作按钮由 JS 通过 layer.open 的 btn 参数生成，这里不内置按钮 -->
        </form>
    </script>

    <script src="./layui/layui.js"></script>
    <script src="./js/area_management.js"></script>
</body>

</html>
